import React from 'react'
import { Card, Button, Divider } from 'antd-mobile'

const SectionTitle = ({ children }) => (
  <div style={{
    background: '#00b578',
    color: '#fff',
    padding: '12px 16px',
    borderRadius: 12,
    fontWeight: 600,
  }}>{children}</div>
)

const Block = ({ title, children }) => (
  <div style={{ marginTop: 12 }}>
    <SectionTitle>{title}</SectionTitle>
    <Card style={{ marginTop: 8, borderRadius: 12 }} bodyStyle={{ padding: 16 }}>
      {children}
    </Card>
  </div>
)

const NumItem = ({ n, children }) => (
  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 10 }}>
    <div style={{
      width: 22,
      height: 22,
      borderRadius: '50%',
      background: '#00b578',
      color: '#fff',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: 12,
      flex: '0 0 22px'
    }}>{n}</div>
    <div style={{ lineHeight: 1.5 }}>{children}</div>
  </div>
)

const TickItem = ({ children }) => (
  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, padding: '10px 0' }}>
    <div style={{ color: '#00b578', fontSize: 16 }}>✓</div>
    <div style={{ color: '#333' }}>{children}</div>
  </div>
)

export default function Tutorial() {
  return (
    <div style={{ padding: 16, paddingBottom: 80 }}>
      <div style={{
        height: 44,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#00b578',
        color: '#fff',
        borderRadius: 8,
        marginBottom: 12,
        fontWeight: 600,
      }}>使用教程</div>

      <Block title='微信已读功能简介'>
        <div style={{ color: '#333' }}>
          微信已读功能可以帮助您查看谁读了您发送的消息，让您的社交互动更加透明。
          通过本系统，您可以发布消息，并获取查看该消息的所有用户记录。
        </div>
      </Block>

      <Block title='如何发布消息'>
        <NumItem n={1}>点击底部导航栏的“发条消息”进入消息发布页面</NumItem>
        <NumItem n={2}>点击右下角的“+”按钮打开发布窗口</NumItem>
        <NumItem n={3}>在文本框中输入您想发布的消息内容</NumItem>
        <NumItem n={4}>点击“发布”按钮完成消息发布</NumItem>
      </Block>

      <Block title='如何分享消息'>
        <NumItem n={1}>在消息列表中找到您想分享的消息</NumItem>
        <NumItem n={2}>点击消息下方的“分享”按钮</NumItem>
        <NumItem n={3}>复制分享链接或直接点击右上角微信分享按钮</NumItem>
        <NumItem n={4}>将链接发送给您的好友或分享到朋友圈</NumItem>
      </Block>

      <Block title='如何查看已读记录'>
        <NumItem n={1}>在消息列表中找到您想查看已读记录的消息</NumItem>
        <NumItem n={2}>点击消息内容进入消息详情页面</NumItem>
        <NumItem n={3}>在页面下方可以看到所有查看过该消息的用户列表</NumItem>
        <NumItem n={4}>列表会显示用户的头像、昵称和查看时间</NumItem>
      </Block>

      <Block title='VIP特权说明'>
        <TickItem>无限制发布消息数量</TickItem>
        <Divider style={{ margin: '8px 0' }} />
        <TickItem>查看更多历史已读记录</TickItem>
        <Divider style={{ margin: '8px 0' }} />
        <TickItem>优先获取系统更新和新功能</TickItem>
        <Divider style={{ margin: '8px 0' }} />
        <TickItem>专属客服支持</TickItem>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 12 }}>
          <Button color='warning' shape='rounded'>立即开通VIP</Button>
        </div>
      </Block>

      <Block title='常见问题'>
        <div style={{ marginBottom: 12 }}>
          <div style={{ fontWeight: 600 }}>Q: 为什么有些人查看了我的消息但没有显示在已读列表中？</div>
          <div style={{ color: '#666' }}>A: 只有通过本系统分享的链接查看消息才会被记录。如果对方没有登录微信或使用了无痕浏览，则无法记录。</div>
        </div>
        <Divider style={{ margin: '8px 0' }} />
        <div style={{ marginBottom: 12 }}>
          <div style={{ fontWeight: 600 }}>Q: 我可以删除已发布的消息吗？</div>
          <div style={{ color: '#666' }}>A: 可以。在消息列表中点击消息下方的“删除”按钮即可删除消息。</div>
        </div>
        <Divider style={{ margin: '8px 0' }} />
        <div style={{ marginBottom: 12 }}>
          <div style={{ fontWeight: 600 }}>Q: VIP会员有有效期吗？</div>
          <div style={{ color: '#666' }}>A: 有。VIP会员有效期为一年，到期后需要重新开通。</div>
        </div>
        <Divider style={{ margin: '8px 0' }} />
        <div>
          <div style={{ fontWeight: 600 }}>Q: 如何联系客服？</div>
          <div style={{ color: '#666' }}>A: 您可以在“我的”页面中找到“联系客服”选项，或添加系统公众号进行咨询。</div>
        </div>
      </Block>
    </div>
  )
}
